<template>
    <div class="location-detail">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <router-link to="/user/location">党建地点</router-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item>党建地点详细信息</el-breadcrumb-item>
      </el-breadcrumb>
  
      <el-card class="detail-card">
        <h4>传递的地点信息:</h4>
        <p><strong>地点 ID:</strong> {{ locationId }}</p>
        <p><strong>地点名称:</strong> {{ locationName }}</p>
      </el-card>
      
      <el-dialog title="提示" :visible.sync="isDeleteDialogVisible" @close="isDeleteDialogVisible = false">
        <span>确定删除此地点吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isDeleteDialogVisible = false">取消</el-button>
          <el-button type="danger" @click="confirmDelete">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { useRoute } from 'vue-router';
  
  const route = useRoute();
  
  // 获取传递的参数
  const locationId = route.params.locationId; 
  const locationName = route.params.locationName;
  
  const isDeleteDialogVisible = ref(false);
  
  const deleteLocation = () => {
    isDeleteDialogVisible.value = true;
  };
  
  const confirmDelete = () => {
    // 这里可以添加删除地点的逻辑
    console.log('确认删除地点 ID:', locationId);
  };
  </script>
  
  <style scoped>
  .location-detail {
    margin: 20px;
  }
  
  .detail-card {
    padding: 20px;
    background-color: #f9f9f9; /* 设置背景色以便突出显示 */
  }
  
  .dialog-footer {
    display: flex;
    justify-content: flex-end; /* 右对齐 */
  }
  </style>
  